<template>
  <div>
    <!-- 默认插槽 -->
    <h1>默认插槽</h1>
    <div class="content">
      <comA :title="food.name" :comData="food.data">
        <img
          style="width: 100%"
          src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1fe9bd8af3604eb38c532ffaf00df345~tplv-k3u1fbpfcp-watermark.image?"
          alt=""
        />
      </comA>
      <comA :title="games.name" :comData="games.data"></comA>
      <comA :title="films.name" :comData="films.data">
        <video
          style="width: 100%"
          controls
          src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
        ></video>
      </comA>
    </div>
    <hr />
    <!-- 具名插槽 -->
    <h1>具名插槽</h1>
    <div class="content">
      <comB :title="food.name">
        <img
          slot="center"
          style="width: 100%"
          src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1fe9bd8af3604eb38c532ffaf00df345~tplv-k3u1fbpfcp-watermark.image?"
          alt=""
        />
        <a slot="footer" href="https://www.baidu.com/">更多</a>
      </comB>

      <comB :title="games.name">
        <ul slot="center" class="comA_content">
          <li v-for="(item, index) in games.data" :key="index">{{ item }}</li>
        </ul>
        <a slot="footer" href="https://www.baidu.com/">更多</a>
      </comB>

      <comB :title="films.name">
        <video
          slot="center"
          style="width: 100%"
          controls
          src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
        ></video>
        <!-- <template slot="footer"> -->
        <!-- 如果使用template包裹的插槽，就可以使用如下写法了，这是最新的写法  -->
        <template v-slot:footer>
          <a href="https://www.baidu.com/">更多</a>
          <h1 style="color: red">欢迎收看</h1>
        </template>
      </comB>
    </div>

    <hr />
    <!-- 作用域插槽 -->
    <h1>作用域插槽</h1>

    <div class="content">
      <comC :title="games.name">
        <!-- 作用域插槽必须使用template来接受数据 -->
        
        <!-- scope="xxx"的写法时slot-scope="xxx"写法的简写 -->

        <!-- 这是普通的写法，而数据在mydata.comData -->
        <!-- <template scope="mydata"> -->

        <!-- 这是解构赋值的写法 -->
        <template slot-scope="{comData}">
          <ul class="comA_content">
            <li v-for="(item, index) in comData" :key="index">{{ item }}</li>
            <a href="https://www.baidu.com/">更多</a>
          </ul>
        </template>
      </comC>
    </div>
  </div>
</template>
<script>
import comA from "./components/comA.vue";
import comB from "./components/comB.vue";
import comC from "./components/comC.vue";
export default {
  components: {
    comA,
    comB,
    comC,
  },
  data() {
    return {
      food: {
        name: "美食",
        data: ["火锅", "烧烤", "小龙虾", "牛排"],
      },
      films: {
        name: "电影",
        data: ["红色警戒", "穿越火线", "神话", "天空之城"],
      },
      games: {
        name: "游戏",
        data: ["穿越火线", "英雄联盟", "欢乐斗地主", "狼人杀"],
      },
    };
  },
};
</script>
<style scoped>
.content {
  display: flex;
  justify-content: space-around;
}
</style>